<!-- 自定义设备 -->
<template>
  <el-form :model="form" :inline="true">
    <el-form-item label="设备名称">
      <el-input v-model="seachValue.name" clearable />
    </el-form-item>
    <el-form-item label="设备类型">
      <el-cascader
        style="width: 100%"
        v-model="seachValue.DevicetypeValue"
        :options="options"
        :show-all-levels="false"
        clearable
        placeholder="请选择设备类型"
        :props="{ value: 'DevicetypeValue', label: 'DevicetypeName', checkStrictly: true }"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSeachList"
        ><el-icon><Search /></el-icon> 搜索
      </el-button>
      <el-button @click="rest"
        ><el-icon><Refresh /></el-icon> 重置
      </el-button>
    </el-form-item>
  </el-form>
  <el-button @click="adddevice" type="primary">添加自定义设备</el-button>
  <el-table :data="tableData" style="width: 100%; margin-top: 10px" show-overflow-tooltip>
    <el-table-column type="selection" />
    <el-table-column property="state" label="名称" show-overflow-tooltip align="center">
      <template #default="scope">{{ scope.row.DevicetypeName }}</template>
    </el-table-column>
    <el-table-column label="操作" show-overflow-tooltip align="center">
      <template #default="scope">
        <el-link :underline="false" @click="modify(scope.row)" style="margin-right: 10px"
          >修改</el-link
        >
        <el-link
          :underline="false"
          @click="deldevice(scope.row.DevicetypeValue)"
          style="margin-right: 10px"
          >删除</el-link
        >
      </template>
    </el-table-column>
  </el-table>

  <AddCustomDevice ref="AddCustomDeviceREF" @update="GetNewlist"></AddCustomDevice>
  <ChangeCustomDevice ref="ChangeCustomDeviceREF" @update="GetNewlist"></ChangeCustomDevice>
</template>
  
<script>
import { defineComponent, ref, onMounted } from 'vue'
import AddCustomDevice from './AddCustomDevice.vue'
import ChangeCustomDevice from './ChangeCustomDevice.vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    AddCustomDevice,
    ChangeCustomDevice
  },
  setup(_, { emit }) {
    // 搜索
    const seachValue = ref({ name: '', DevicetypeValue: '', isVirtual: 'IS_NOT_VIRTUAL' })
    // 设备类型数组
    const options = ref([])
    // 添加自定义设备的实例对象
    const AddCustomDeviceREF = ref(null)
    // 修改自定义设备的实例对象
    const ChangeCustomDeviceREF = ref(null)
    // table数据
    const tableData = ref([])
    // vuex导入
    const store = useStore()
    // vuex 设备类型
    const deviceTypeStr = ref(store.state.deviceTypeStr)

    const adddevice = () => {
      AddCustomDeviceREF.value.dialogVisible = true
    }
    // 搜索确认按钮
    const getSeachList = () => {}
    // 重置按钮
    const rest = () => {
      const res = window.api.listCustomDeviceType()
      tableData.value = JSON.parse(res)

      const dds = deviceTypeStr.value
      tableData.value?.forEach((objB) => {
        let exists = dds.children.some((objA) => objA.DevicetypeValue === objB.DevicetypeValue)
        // 如果不存在相同的 DevicetypeValue，则将 objB 添加到数组 a 中
        if (!exists) {
          dds.children.push(objB)
        }
      })
    }
    //  修改
    const modify = (data) => {
      ChangeCustomDeviceREF.value.dialogVisible = true
      ChangeCustomDeviceREF.value.form = data
    }
    // 删除
    const deldevice = (id) => {
      const res = window.api.removeCustomDeviceType(id)
      if (res === '删除成功') {
        ElMessage.success(res)
        const dds = deviceTypeStr.value
        // 找到满足条件的元素的索引
        const index = dds.children.findIndex((item) => item.DevicetypeValue === id)

        // 如果找到了满足条件的元素，就删除它
        if (index !== -1) {
          dds.children.splice(index, 1)
        }
        rest()
      } else {
        ElMessage.error(res)
        rest()
      }
    }

    const GetNewlist = () => {
      rest()
    }
    onMounted(() => {
      rest()
    })
    return {
      seachValue,
      options,
      AddCustomDeviceREF,
      ChangeCustomDeviceREF,
      tableData,
      store,
      deviceTypeStr,
      getSeachList,
      rest,
      adddevice,
      modify,
      deldevice,
      GetNewlist
    }
  }
})
</script>
    
    <style lang="less" scoped>
</style>